/**custom**/

@steps: ~"@{css-prefix}steps";
@step: ~"@{css-prefix}step";
@timer: ~"@{step}-timer";
@step-head: ~"@{step}-head";
@step-head-icon: ~"@{step-head}-icon";
@step-head-line: ~"@{step-head}-line";
@step-content: ~"@{step}-content";
@step-finish: ~"@{step}-finish";
@step-wait: ~"@{step}-wait";
@step-process: ~"@{step}-process";
@step-error: ~"@{step}-error";

.@{steps} {
  width: 100%;
  height: 100%;
  display: flex;
  .@{step} {
    flex: 1 1;
    display: flex;
    .@{timer} {
      width: 100px;
      font-size: 12px;
      margin-right: 10px;
      text-align: right;
      padding-top: 4px;
    }
    .@{step-head} {
      display: flex;
      .iconClass{
        cursor: pointer;
      }
      .@{step-head-icon} {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: solid 2px @border-color-base;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        span {
          font-size: 14px;
          color: @border-color-base;
        }
      }
      .@{step-head-line} {
        background-color:  @border-color-base;
      }
    }

    .@{step-content}{
      font-size: 14px;
      &-title {
        margin-top: 4px;
      }
      &-des {
        padding: 10px 10px 0 0;
      }
    }

    &:last-child {
      flex-grow: 0!important;
      flex-basis: auto!important;
      .@{step-head} {
        &-line {
          display: none;
        }
      }
    }
  }

  /* 纵向布局 */
  &&-vertical {
    flex-direction: column;
    .@{step} {
      flex-grow: 1;
      flex-direction: row;
      .@{step-head} {
        flex-grow: 0;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        .@{step-head-line} {
          flex-grow:1;
          width: 2px;
        } 
      }
      .@{step-content} {
        margin-left: 10px;
        flex-grow: 1;
        flex-basis: inherit;
      }
    }
  }

  /* 横向布局 */
  &&-horizontal {
    flex-direction: row;
    .@{step} {
      flex-direction: column;
      flex-grow: 1;
      .@{timer} {
        text-align: left;
      }
      .@{step-head} {
        display: flex;
        align-items: center;
        .@{step-head-line} {
          flex-grow: 1;
          height: 1px;
        }
      }
      // .@{step-content} {
      //   // flex-grow: 1;
      // }
    }
  }
  
  // 完成
  .@{step-finish} {
    .@{step-head} .iconClass{
      color: @primary-color;
      cursor: pointer;
    }
    .@{step-head} .@{step-head-icon} {
      border-color: @primary-color;
      position: relative;
      span {
        color: @primary-color;
      }
    }
    .@{step-head} .@{step-head-icon}::after {
      content: '';
      width: 4px;
      height: 8px;
      position: absolute;
      top: 3px;
      left: 6px;
      border: 2px solid @primary-color;
      border-top: 0;
      border-left: 0;
      transform: rotate(45deg) scale(1);
    }
    .@{step-head}.is-timer {
      .@{step-head-icon}::after {
        display: none;
      }
      .@{step-head-line}  {
        background-color: @border-color-base;
      }
  }
    .@{step-head} .@{step-head-line} {
      background-color: @primary-color;
    }
    
    .@{step-content} .@{step-content}-title{
        color: @primary-color;
    }
  }

  /* 进行中 */
  .@{step-process} {
    .@{step-head} .@{step-head-icon} {
      border: solid 2px @title-color;
      span {
        color: @title-color;
      }
    }
    .@{step-content} {
      &-title {
        color: @title-color;
        font-weight: bold;
      }
    }
  }

  /* 待完成 */
  .@{step-wait} {
    .@{step-head} .iconClass{
      cursor: pointer;
      color: @border-color-base;
    }
  }

  /* 错误 */
  .@{step-error} {
    .@{step-head} .@{step-head-icon} {
      border: solid 2px @error-color;
      position:relative;
      span {
        color: @title-color;
      }
    }
    .@{step-head} .iconClass {
      color: @error-color;
      cursor: pointer;
    }
    .@{step-head} .@{step-head-icon}::after, .@{step-head} .@{step-head-icon}::before {
      position: absolute;
      content: "";
      // width: 8px;
      height: 10px;
      border: solid 2px @error-color;
      border-top: 0;
      border-bottom: 0;
      top: 4px;
      left: 8px;
    }
    .@{step-head} .@{step-head-icon}::after {
      transform: rotate(-45deg);
      border-left: 0;
    }
    .@{step-head} .@{step-head-icon}::before {
      transform: rotate(45deg);
      border-right: 0;
    }
  }

}

